<template>
    <div class="background-fff">
        <div class="index-box-tab">
            <van-row type="flex" justify="space-around">
                <van-col span="4">
                    <img v-if="tx" class="imagePathTx" :src="$imgPath(tx)" alt="" @click="login">
                    <img v-else class="imagePathTx" src="../assets/image/img_tx.png" alt="" @click="login">
                </van-col>
                <van-col span="10">
                    <div class="tab-box text-align-c font-3 color-default" @click="active = 0">
                        <!-- <span class="fl text-align-c" v-for="(item,index) in tabArr" :class="[index == active ? 'active' : '']" :key="index" @click="tabClick(index)">{{item}}</span> -->
                        首页
                    </div>
                </van-col>
                <van-col span="5">
                    <!-- <img class="imagePathFx fr" src="../assets/image/icon_calendar.png" alt="" @click="show = true"> -->
                    <span class="fl" @click="toMessage">                      
                        <img style="width:1rem; margin-top:.3rem;" src="../assets/image/index/icon_news.png" alt="">
                        <em class="messHint" v-show="isHint1"></em>
                    </span>
                    <span class="search-img">
                        <img src="../assets/image/index/icon_search.png" alt="" @click="secrchList()">
                    </span>                    
                </van-col>
            </van-row>
            <!-- <router-link tag="span" :to="{name:'flashOrders'}" class="xiadan" v-if="active == 0">
                <img src="../assets/image/img_1.png" alt="">
            </router-link> -->
        </div>
        <van-popup v-model="show">
            <div class="qiandao-box position-r">
                <span class="icon_close" @click="show = false"></span>
                <span class="login-li text-align-c">每天登陆即有礼</span>
                <p class="login-num text-align-c">
                    <span>本周累计签到0天</span>
                </p>
                <ul class="week-ul text-align-c clearfix">
                    <li class="week-ul-li clearfix">
                        <div class="fl week-ul-li-div">
                            <span class="li-img li-img1"></span>
                            <span class="week-name">1</span>
                        </div>
                        <div class="fl week-ul-li-div">
                            <span class="li-img li-img2"></span>
                        <span class="week-name">2</span>
                        </div>
                        <div class="fl week-ul-li-div">
                            <span class="li-img li-img1"></span>
                            <span class="week-name">3</span>
                        </div>
                        <div class="fl week-ul-li-div">
                            <span class="li-img li-img2"></span>
                            <span class="week-name">4</span>
                        </div>
                    </li>
                    <li class="li-two clearfix">
                        <div class="week-ul-li-div">
                            <span class="li-img li-img2"></span>
                            <span class="week-name">5</span>
                        </div>
                        <div class="week-ul-li-div">
                            <span class="li-img li-img1"></span>
                            <span class="week-name">6</span>
                        </div>
                        <div class="week-ul-li-div">
                            <span class="li-img li-img3"></span>
                            <span class="week-name">7</span>
                        </div>
                    </li>
                </ul>
                <span class="text-align-c huodong-title">活动期间累计登陆7天可领取神秘大礼</span>
                <span class="text-align-c lingqu">领取</span>
            </div>
        </van-popup>
        <index-child v-if="active == 0"></index-child>
        <found-child v-else-if="active == 1"></found-child>
    </div>
</template>
<script>
import { Popup } from 'vant'
import apiHttp from '../api/index.js'
import indexChild from '@/components/indexChild/index'
import foundChild from '@/components/indexChild/found'
export default {
    data(){
        return{
            tabArr:['首页','发现','消息'],
            active: 0,
            show: false,
            tx:'',
            isHint1:false,
        }
    },
    components: {
        "index-child":indexChild,
        "found-child":foundChild
    },
    mounted(){
        this.verify()
    },
    methods:{
        // 页面切换
        tabClick(index){
            this.active = index
        },
        login(){
            if(this.$store.state.token){
                this.$router.push({
                    path:'/centerAll'
                })
            }else{
                this.$router.push({
                    path:'/login'
                })
            }
        },
        //返回消息首页
        toMessage(){
            this.$router.push({
                name:"message"
            });
        } ,
        // 个人头像 获取
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.tx = resp.headImg
                localStorage.setItem('userCode',resp.code)
            })
        },
        secrchList(){
            this.$router.push({
                name:'search',
                query:{
                    socrt:'index'
                }
            })
        },

        //获取消息数量
        getCountUserMessage(){
            let that = this;
            apiHttp.messageIndex.getCountUserMessage('',resp=>{
                if(resp.code==200){
                    if(resp.data!=null&&resp.data!=""&&resp.data>0){
                        that.isHint1=true;
                    }
                }
            });
        },
        // 判断token是否有效
        verify(){
            apiHttp.apiLogin.verify('',resp=>{
                if(resp.code == 200){
                    if(resp.data == 1){
                        this.screening()
                        this.getCountUserMessage()
                    }else{
                        localStorage.removeItem('token')
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
.search-img{
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
}
.search-img>img{
    width: 1rem !important;
    margin-top: 0.3rem;
}
.active{
    color: #d84e4d;
}
.index-box-tab{
    height: 1.6rem;
    padding-top: .8rem;
    overflow: hidden;
}
.imagePathTx{
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
}
.tab-box{
    height: 1.6rem;
    overflow: hidden;
    font-size: .72rem;
    line-height: 1.6rem;
}
.tab-box span{
    width: 33.3333%;
    line-height: 2rem;
    height: 1.6rem;
    overflow: hidden;
    display: inline-block;
}
.imagePathFx{
    padding-top: .4rem;
}
.van-icon-search{
    width: 1rem;
    height: 1rem;
    padding-top: .3rem;
}
.van-tabs__line{
    background-color: transparent;
}
.xiadan{
    position: fixed;
    right: 1rem;
    top: calc(50% - 3rem);
    width: 3rem;
    z-index: 1000;
}
.van-popup{
    border-radius: .3rem;
}
.qiandao-box{
    width: 5.6rem;
    background-image: url(../assets/image/bjtk.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: .3rem;
}
.icon_close{
    position: absolute;
    right: .3rem;
    top: .3rem;
    background-image: url(../assets/image/index/icon_close.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 100;
    width: .25rem;
    height: .25rem;
    display: block;
}
.login-li{
    width: 100%;
    height: 1rem;
    font-size: .36rem;
    display: block;
    color: #ffffff;
    line-height: 1rem;
    font-weight: bold;
    padding-top: .3rem;
}
.login-num{
     width: 100%;
     height: .6rem;
     display: block;
}
.login-num span{
    height: .6rem;
    line-height: .6rem;
    background-color: #fff;
    display: inline-block;
    font-size: .24rem;
    color: #d84e4d;
    border-radius: .5rem;
    padding: 0 .2rem;
    font-weight: bold;
}
.week-ul{
    padding: .5rem .5rem 0 .3rem;
}
.week-ul-li-div{
    width: 1rem;
    margin-left: .2rem;
    display: inline-block;
    background-color: #f6f6f6;
    border-radius: .2rem;
}
.li-img{
    width: 100%;
    height: 1rem;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #eeeeee;
    border-radius: .2rem .2rem 0 0;
}
.li-img1{
    background-image: url(../assets/image/yhj.png);
    background-size: 80%;
}
.li-img2{
    background-image: url(../assets/image/zs.png);
    background-size: 60%;
}
.li-img3{
    background-image: url(../assets/image/lw.png);
    background-size: 50%;
}
.week-name{
    height: .33rem;
    width: 100%;
    display: inline-block;
    line-height: .33rem;
    font-size: .3rem;
}
.li-two{
    padding-top:.2rem;
}
.huodong-title{
    display: block;
    height: 1rem;
    line-height: 1rem;
    font-size: .24rem;
    color: #666;
}
.lingqu{
    height: .66rem;
    width: 3.46rem;
    display: block;
    line-height: .7rem;
    border: solid .01rem #d84e4d;
    font-size: .3rem;
    margin: 0 auto .5rem;
    overflow: hidden;
    border-radius: .5rem;
}

.messHint{
    display:inline-block;
    width: .2rem;
    height: .2rem;
    background-color:#D74D4D;
    border-radius:50%;
    position: relative;
    bottom: 0.9rem;
    right: 0.1rem;
}
</style>
